<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>下拉菜单组件文档 - layui.dropdown</title>
	<link rel="stylesheet" href="../libs/layui/layui-2.9.14/dist/css/layui.css">
	<script src="../libs//layui//layui-2.9.14/dist/layui.js"></script>
	<style>


	</style>
</head>

<body style="margin:100px ;">
	<button type="button" class="layui-btn" id="btn">一个标准的按钮</button>

	<button class="layui-btn" id="demo1">
		下拉菜单
		<i class="layui-icon layui-icon-down layui-font-12"></i>
	</button>

	<button class="layui-btn demo2">
		下拉菜单
		<i class="layui-icon layui-icon-down layui-font-12"></i>
	</button>

	<button class="layui-btn " id="demo3">
		下拉菜单
		<i class="layui-icon layui-icon-down layui-font-12"></i>
	</button>

	<button class="layui-btn " id="demo4">
		下拉菜单
		<i class="layui-icon layui-icon-down layui-font-12"></i>
	</button>


	<script>
		layui.use('dropdown', function () {
			var dropdown = layui.dropdown;
			var $ = layui.jquery;

			dropdown.render({
				elem: '#demo1' //可绑定在任意元素中，此处以上述按钮为例
				, show: false
				, id: 'demo1'
				//菜单被点击的事件
				, click: function (obj) {
					console.log(obj);
					layer.msg('回调返回的参数已显示再控制台');
				}

				, data: [{
					title: 'menu item 1'
					, id: 100
					, href: '#'
				}, {
					title: 'menu item 2'
					, id: 101
					, href: 'https://www.layui.com/' //开启超链接
					, target: '_blank' //新窗口方式打开
				}, { type: '-' }, {
					title: 'menu item 3'
					, id: 102
					, type: 'group'  //菜单类型，支持：normal/group/parent/-
					, child: [{
						title: 'menu item 3-1'
						, id: 103
					}, {
						title: 'menu item 3-2'
						, id: 104
						, child: [{
							title: 'menu item 3-2-1'
							, id: 105
						}, {
							title: 'menu item 3-2-2'
							, id: 106
						}]
					}, {
						title: 'menu item 3-3'
						, id: 107
					}]
				}, { type: '-' }, {
					title: 'menu item 4'
					, id: 108
				}, {
					title: 'menu item 5'
					, id: 109
					, child: [{
						title: 'menu item 5-1'
						, id: 11111
						, child: [{
							title: 'menu item 5-1-1'
							, id: 2111
						}, {
							title: 'menu item 5-1-2'
							, id: 3111
						}]
					}, {
						title: 'menu item 5-2'
						, id: 52
					}]
				}, { type: '-' }, {
					title: 'menu item 6'
					, id: 6
					, type: 'group'
					, isSpreadItem: false
					, child: [{
						title: 'menu item 6-1'
						, id: 61
					}, {
						title: 'menu item 6-2'
						, id: 62
					}]
				}]

			});


			//菜单项被点击的回调
			$(".demo2").data('id', [1, 2, 3])
			dropdown.render({
				elem: '.demo2'
				, data: [{
					title: 'item 1'
					, id: 'aaa'
				}, {
					title: 'item 2'
					, id: 'bbb'
				}]
				, click: function (data, othis) {

					let listId = $(this.elem).data('id'); //表格列表的预埋数据
					layer.msg('得到表格列表的 id：' + listId + '，下拉菜单 id：' + data.id);
				}
			});


			//自定义菜单项模板
			dropdown.render({
				elem: '#demo3'
				, data: [{
					title: '刷新',
					name: "aaa"
					//当设定了模板时，菜单项将优先显示模板结构；否则将默认显示标题
					, templet: '<i class="layui-icon layui-icon-refresh"></i> {{d.name}}'
					, id: 100
				}, {
					title: 'menu item 2'
					//该模板由「图片+标题+徽章」组成
					, templet: '<img src="./assets/flow/1.jpg" style="width: 16px;"> {{d.title}} <span class="layui-badge-dot"></span>'
					, id: 101
					, href: 'https://www.layui.com/'
					, target: '_blank'
				}, {
					title: 'menu item 3' //未开启模板时，默认直接显示标题
					, id: 103
				}]
			})


			//右键菜单
			dropdown.render({
				elem: '#demo4' //在 id="demo" 的元素中触发事件。也可以直接设置为 document，从而重置整个右键菜单
				, trigger: 'contextmenu' //右键事件
				, data: [{
					title: 'menu item 1'
					, id: 1
				}, {
					title: 'menu item 2'
					, id: 'reload'
				}, { type: '-' }, {
					title: 'menu item 3'
					, id: 3
					, child: [{
						title: 'menu item 3-1'
						, id: 31
					}, {
						title: 'menu item 3-2'
						, id: 32
					}, {
						title: 'menu item 3-3'
						, id: 33
					}]
				}, { type: '-' }, {
					title: 'menu item 4'
					, id: 111
				}, {
					title: 'menu item 5'
					, id: 555
				}, {
					title: 'menu item 6'
					, id: 666
				}]
			});

		});
	</script>


</body>

</html>